<template>
  <a-modal
    v-model:open="state.dialog.isShowDialog"
    :title="state.dialog.title"
    @ok="handleSubmit"
    @cancel="handleReset"
    :width="620"
    centered
  >
    <a-form ref="formRef" :model="formState" :rules="rules" layout="vertical">
      <a-form-item label="维度名称" name="name" required>
        <a-input v-model:value="formState.name" />
      </a-form-item>

      <a-form-item label="key_name" name="keyName" required>
        <a-input v-model:value="formState.keyName" />
      </a-form-item>

      <a-form-item label="同义词" name="synonyms">
        <a-input v-model:value="formState.synonyms" />
      </a-form-item>
      <a-form-item label="描述" name="parent">
        <a-textarea v-model:value="formState.parent" allow-clear />
      </a-form-item>
    </a-form>
  </a-modal>
</template>

<script setup lang="ts">
  import { ref, reactive, defineAsyncComponent } from 'vue';
  import type { Rule } from 'ant-design-vue/es/form';
  import { DimensionFormState } from '@/types/dimension';

  const emit = defineEmits(['refresh']);

  const formRef = ref();

  const state = reactive({
    dialog: {
      isShowDialog: false,
      title: '新增维度',
    },
  });
  const formState = reactive<DimensionFormState>({});

  const rules: Record<string, Rule[]> = {
    name: [{ required: true, message: '请输入维度名称' }],
    keyName: [{ required: true, message: '请输入key_name' }],
  };

  const openDialog = () => {
    state.dialog.isShowDialog = true;
  };

  // 提交处理[5](@ref)
  const handleSubmit = async () => {
    try {
      await formRef.value.validate();
      console.log('提交数据:', formState);
      // 调用API接口提交数据
      state.dialog.isShowDialog = false;
    } catch (error) {
      console.error('表单验证失败:', error);
    }
  };

  // 重置表单
  const handleReset = () => {
    formRef.value.resetFields();
    state.dialog.isShowDialog = false;
  };
  // 暴露变量
  defineExpose({
    openDialog,
  });
</script>

<style scoped>
  .ant-form-item {
    margin-bottom: 10px;
  }
</style>
